<template>
  <div class="gailan-L">
    <el-card class="box-card shebei">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">设备概览 </span>
        <i class="iconfont icon-askoutline" style="color: #ccc"></i>
        <el-button style="float: right; padding: 3px 0" type="text"
          >绑定设备</el-button
        >
      </div>
      <div class="shebeinei">
        <img src="../../../assets/img/gateway.png" alt="" class="tu1" />
        <div class="she1">
          <p style="font-size: 30px">{{ deviceObj.LoRaWAN.total }}</p>
          <p>LoRaWAN</p>
          <p>网关</p>
        </div>
        <div class="she1">
          <p style="font-size: 30px">{{ deviceObj.LoRaPP.total }}</p>
          <p>LoRaPP</p>
          <p>网关</p>
        </div>
        <div class="she1">
          <p style="font-size: 30px">{{ deviceObj.group }}</p>
          <p>群组</p>
        </div>
        <div class="she2"></div>
        <i
          class="iconfont icon-yalichuanganqi"
          style="color: #91a8bf; font-size: 60px"
        ></i>
        <div>
          <p style="font-size: 30px">{{ deviceObj.sensor.total }}</p>
          <p>传感器节点</p>
        </div>
      </div>
    </el-card>
    <el-card class="box-card jiankong">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">监控 </span>
        <i class="iconfont icon-askoutline" style="color: #ccc"></i>
      </div>
      <p>
        <span>网关离线</span
        ><span class="shuju1" style="color: #75a26e">{{
          deviceObj.LoRaWAN.total
        }}</span>
      </p>
      <p>
        <span>节点离线</span
        ><span class="shuju1" style="color: #75a26e">{{
          deviceObj.sensor.offline
        }}</span>
      </p>
      <p>
        <span>传感器低电量</span
        ><span class="shuju2" style="color: #ed5253">{{
          deviceObj.sensor.lowBattery
        }}</span>
      </p>
    </el-card>
    
  </div>
</template>

<script>
import { $deviceCount } from "@/api/index.js";
export default {
  name: "DeviceView",
  data() {
    return {
      deviceObj: {
        LoRaWAN: "",
        LoRaPP: "",
        group: "",
        sensor: "",
      },
    };
  },
  mounted() {
    $deviceCount().then((res) => {
      console.log(res);
      this.deviceObj = res.data.data;
    });
  },
};
</script>

<style>
.gailan-L {
  display: flex;
  width: 100%;
}
.shebei {
  width: 70%;
  height: 250px;
  margin-left: 10px;
}
.jiankong {
  width: 30%;
  margin-left: 10px;
}
.jiankong p {
  height: 25.17px;
  margin-bottom: 20px;
  font-weight: bold;
}
.title-bold {
  font-size: 20px;
  font-weight: bold;
}
.gailan {
  display: flex;
  margin-top: 10px;
}
.gailan-R {
  width: 30%;
  height: 200px;
  margin-left: 10px;
  margin-right: 10px;
}
.gonggao {
  height: 250px;
}
.gonggao p {
  margin-bottom: 20px;
}
.shuju1 {
  display: inline-block;
  width: 50px;
  height: 25px;
  border-radius: 30px;
  margin-left: 172px;
  background: #ddf0e0;
  vertical-align: middle;
  text-align: center;
  line-height: 25px;
}
.shuju2 {
  display: inline-block;
  width: 50px;
  height: 25px;
  border-radius: 30px;
  margin-left: 140px;
  background: #fbdadb;
  vertical-align: middle;
  text-align: center;
  line-height: 25px;
}
.tu1 {
  height: 100px;
  margin-top: 25px;
}
.shebeinei {
  display: flex;
}
.shebeinei div {
  margin-left: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  font-weight: bold;
}
.icon-yalichuanganqi {
  transform: rotate(180deg);
  margin-left: 30px;
  margin-bottom: 20px;
}
.she1::before {
  content: "";
  width: 1px;
  height: 55px;
  background: #ccc;
  margin-left: 10px;
  position: absolute;
  top: 42px;
  left: -58px;
}
.she2::before {
  content: "";
  width: 1px;
  height: 109px;
  background: #ccc;
  margin-left: 10px;
  position: absolute;
  top: 16px;
  left: -45px;
}
.kongqishidu,
.guangzhao,
.qiya,
.turangshidu {
  width: 48.72%;
  height: 400px;
  margin-right: 10px;
  margin-top: 10px;
  margin-left: 10px;
}
.tubiao {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.chart {
  height: 400px;
}
</style>